<template>
    <view class="content">
        <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage"  show-scrollbar="false">

            <view class="moneyBg">
                <view class="text">{{ navBarTitle }}</view>
            </view>

            <view class="contentDetail">
                <view class="wraper_bottom" hover-class="none" hover-stop-propagation="false">
                    <view class="wraper_bottom_reason wraper_bottom_box ">
                        <view class="bottom_title">内容</view>
                        <view class="describe">未收集</view>
                        <!-- <view class="" style="display: flex; justify-content: space-between;" @click="selectReason">
                            <view class="reason">请选择原因</view>
                            <van-icon name="arrow" />
                        </view> -->
                    </view>
                    <view class="wraper_bottom_money wraper_bottom_box  t32 ">
                        <view class="bottom_title">目的</view>
                        <view class="describe">在我的个人信息页面展示用户手机号、用于实名认证、关联房屋</view>
                        <!-- <view class="reason">￥{{ money }} <img
                                src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                                alt="" style="height: 10px; width: 10px;margin-right: 6px;margin-left: 19px" />{{ score
                            }} </view> -->
                    </view>
                    <view class="wraper_bottom_reason wraper_bottom_box  t32" >
                        <view class="bottom_title">使用场景</view>
                        <view class="describe">注册并登录17乐生活小程序账号时</view>
                        <view class="describe t17">实名认证时</view>
                    </view>
                    <view class="wraper_bottom_describe wraper_bottom_box  t32">
                        <view class="bottom_title">信息来源</view>
                        <view class="describe">直接收集</view>
                        <view class="describe t17">间接收集</view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    components: {
    },
    data () {
        return {
            navBarTitle: '手机号码',
            scrolling: false,
            // 新增本地权限存储
            localPermissions: [
                { name: '位置信息', usedIn: '周边商家推荐' },
                { name: '相册', usedIn: '头像设置' },
                { name: '摄像头', usedIn: '扫码功能' }
            ],
            // 新增个人信息存储
            collectedInfo: []

        }
    },
    onLoad (data) {
        if (data !== null) {

        }
    },
    onReady () {},
    onShow() {
        // 从本地存储加载
        this.collectedInfo = uni.getStorageSync('localUserInfo') || []
    },
    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // 新增信息收集方法
        collectPhoneInfo() {
            uni.showModal({
                title: '信息收集声明',
                content: '我们将安全存储您的手机号信息',
                success: res => {
                    if (res.confirm) {
                        const newInfo = {
                            type: '手机号',
                            date: new Date().toLocaleDateString(),
                            purpose: '账号安全验证'
                        }
                        this.collectedInfo.push(newInfo)
                        uni.setStorageSync('localUserInfo', this.collectedInfo)
                    }
                }
            })
        }
        
    }
}
</script>

<style scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

.scroll-content {
    flex: 1;
    height: 1px;
}

.moneyBg {
    margin-top: 17px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
}

.text {
    font-size: 30px;
    text-align: center;
    color: #111111;
    line-height: 30px;
}

/* .money {
    font-size: 20px;
    color: #111111;
    text-align: center;
    line-height: 20px;
    margin-left: 19px;
}

.date {
    margin-top: 36px;
    padding: 0px 24px;
} */

/* .refundDetail {
    padding: 42px 24px 24px 24px;
} */

.box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}



.contentDetail {
    margin-top: 25px;
    padding: 0px 24px 24px 24px;
    /* display: flex;
    justify-content: space-between; */
    width: calc(100% - 48px)
}



.wraper_bottom_box {
    padding-bottom: 40rpx;
    border-bottom: 1px solid #f0f0f0;
}

.bottom_title {
    font-size: 26rpx;
    color: #333333;
    line-height: 26rpx;
}

.describe {
    font-size: 24rpx;
    color: #666666;
    /* line-height: 24rpx; */
    margin-top: 50rpx;
}

.reason {
    font-size: 14px;
    color: #666666;
    padding-top: 20px;
    padding-bottom: 13px;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

::v-deep .van-cell {
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}

.btn-area {
    padding: 10px 24px 20px 24px;

    width: calc(100% - 48px);
    /* height: 50px; */
    display: flex;
    /* background: palegoldenrod; */
    z-index: 100;
    justify-content: space-around;
}

/* .button {
    background-color: #Ffffff;
    border-radius: 38px;
    font-size: 14px;
    text-align: center;
    color: #111111;
    height: 38px;
    line-height: 38px;
    border: 1px solid #D4D4D4;
    padding-left: 35px;
    padding-right: 35px;
} */

.checkBtn {
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size: 14px;
    text-align: center;
    color: #FFFFFF;
    height: 38px;
    line-height: 38px;
    width: 100%;
}

button {
    border: none;
}

button[plain]{
    border: none;
}

.t16 {
    margin-top: 16px;
}
.t17{
    margin-top: 34rpx;
}

.t21 {
    margin-top: 21px;
}

.t32 {
    margin-top: 32px;
}

::v-deep .van-uploader__upload-text {
    text-align: center !important;
}
</style>
